<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap3.3.7.css">
</head>
<body>
    <div id="app">
        <cmt-box @subfun="accMsg" ></cmt-box>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="(item, index) in list" :key="index">
                {{item.con}}
                <span class="badge">{{item.name}}</span>
            </li>
        </ul>
    </div>

    <template id="commment">
        <div>
            <label class="form-group"><span>来者留名：</span>
                <input type="text" class="form-control" v-model="name">
            </label><br>
            <label class="form-group"><span>内 容：</span>
                <textarea cols="30" rows="4" class="form-control" v-model="con" ></textarea>
            </label><br>
            <label><input type="button" value="留 言" class="btn btn-primary" @click="submit"></label>
        </div>
    </template>
    
    <script>
        var commmentBox = {
            template: "#commment",
            data() {
                return {
                    name: '',
                    con: ''
                }
            },
            methods: {
                submit(){
                    if (this.name == '') {
                        alert('大侠请留名');
                        return false;
                    }
                    this.$emit('subfun',{name: this.name, con: this.con});
                    this.name = '';
                    this.con = '';
                }
            },
        }

        // 创建一个vue实例
        var vm = new Vue({
            el: '#app', // 当前new的这个vue实例要控制的DOM
            data:{
                list:[
                    {id: Date.now(), name: "李白", con: "天生我才必有用"},
                    {id: Date.now(), name: "老马", con: "只有充钱才会变强"},
                    {id: Date.now(), name: "境泽", con: "宁愿饿死也不吃美国的救济粮"},
                ],
            },
            methods: {
                accMsg(data){
                    data.id = Date.now();
                    this.list.push(data);
                }
            },
            components:{
                cmtBox: commmentBox
            }
        });

    </script>
</body>
</html>